<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      style="width: 100%"
      row-key="id"
      border
    >
      <el-table-column
        prop="name"
        label="角色名称"
      />
      <el-table-column
        width="55"
        label="操作"
      >
        <template slot-scope="{row}">
          <input :key="row.id" :checked="row.auth == '1' ? 'checked':''" type="checkbox" @change="selectChange(row,$event.target.checked)">
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { AddUserRole, DeleteUserRole, GetUserRoleList } from '@/api/SystemManagerApi'
export default {
  props: ['userid'],
  data() {
    return {
      userId: '',
      dialogFormVisible: false,
      dialogButtonFormVisible: false,
      listLoading: false,
      menuId: null,
      list: [],
      itemsStatus: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      GetUserRoleList(this.userid).then(response => {
        this.list = response.data
        this.listLoading = false
      })
    },
    uuid() {
      function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
      }
      return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
    },
    selectChange(row, checked) {
      if (checked) {
        AddUserRole({ 'userId': this.userid, 'roleId': row.id }).then(response => {
        })
      } else {
        DeleteUserRole({ 'userId': this.userid, 'roleId': row.id }).then(response => {
        })
      }
    }
  }
}
</script>
